<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="人物画像-新建-查看-编辑"
        data-page-identification="w_8rq1xzx30h"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!--          {{state.source}}-->
            <!--          {{urlMiddleMap[state.source]}}-->
            <!-- begin vid_he7kuq24pr 自定义模板_hpt2v3xarp -->
            <!--            新建/编辑-->
            <a-drawer
                :title="state.addOrEditTitle"
                placement="right"
                width="820px"
                :mask-closable="true"
                :visible="state.addOrEditVisible"
                @close="cancelDrawer"
                :body-style="{
                    paddingBottom: '0'
                }"
            >
                <div class="drawer-body">
                    <div class="drawer-main">
                        <div class="tip mg16">关键信息</div>
                        <a-form :model="state.modalForm" ref="formRef" layout="vertical">
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="姓名"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userName"
                                    >
                                        <a-input
                                            maxlength="50"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userName"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="职务"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userPosition"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userPosition"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="职能与权限"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userFunction"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userFunction"
                                        />
                                    </a-form-item>
                                </a-col>
                                <!--                                <a-col :span="8">-->
                                <!--                                    <a-form-item-->
                                <!--                                        label="电话号码"-->
                                <!--                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"-->
                                <!--                                        name="telephone"-->
                                <!--                                    >-->
                                <!--                                        <a-input-number-->
                                <!--                                            :placeholder="inputHolder"-->
                                <!--                                            v-model:value="state.modalForm.telephone"-->
                                <!--                                        />-->
                                <!--                                    </a-form-item>-->
                                <!--                                </a-col>-->
                                <!--                                <a-col :span="8">-->
                                <!--                                    <a-form-item-->
                                <!--                                        label="微信号"-->
                                <!--                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"-->
                                <!--                                        name="wechatNumber"-->
                                <!--                                    >-->
                                <!--                                        <a-input-->
                                <!--                                            maxlength="200"-->
                                <!--                                            show-count-->
                                <!--                                            :placeholder="inputHolder"-->
                                <!--                                            v-model:value="state.modalForm.wechatNumber"-->
                                <!--                                        />-->
                                <!--                                    </a-form-item>-->
                                <!--                                </a-col>-->
                                <a-col :span="24">
                                    <a-form-item
                                        label="掌握核心决策人及其权限"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userCoreDecisionMakers"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userCoreDecisionMakers"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg20 flex"
                                    ><div> 履历 </div
                                    ><a-button type="link" @click="handleAddJob">
                                        <template #icon><PlusOutlined /></template>
                                        添加</a-button
                                    ></div
                                >
                            </a-col>
                            <div
                                class="stage-item"
                                v-for="(item, index) in state.modalForm.workExperienceList"
                                :key="index"
                            >
                                <a-row :gutter="24">
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item
                                            label="时间区间"
                                            :rules="[{ required: false, message: '请选择', trigger: 'blur' }]"
                                            :name="['workExperienceList', index, 'workTime']"
                                        >
                                            <a-range-picker
                                                picker="month"
                                                valueFormat="YYYY-MM"
                                                v-model:value="state.modalForm.workExperienceList[index].workTime"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item
                                            label="单位"
                                            :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                            :name="['workExperienceList', index, 'company']"
                                        >
                                            <a-input
                                                maxlength="200"
                                                show-count
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.workExperienceList[index].company"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item
                                            label="职务"
                                            :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                            :name="['workExperienceList', index, 'position']"
                                        >
                                            <a-input
                                                maxlength="200"
                                                show-count
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.workExperienceList[index].position"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="3" class="gray-bgc" style="display: flex; align-items: center">
                                        <MinusCircleOutlined
                                            style="cursor: pointer; color: #3875ff"
                                            @click="handleDeleteJob(index)"
                                        />
                                    </a-col>
                                </a-row>
                            </div>
                            <a-col :span="24">
                                <a-form-item
                                    label="生产和信息化岗位专业"
                                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                    name="userInformationProfessional"
                                >
                                    <a-input
                                        maxlength="200"
                                        show-count
                                        :placeholder="inputHolder"
                                        v-model:value="state.modalForm.userInformationProfessional"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="项目业绩"
                                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                    name="userPerformance"
                                >
                                    <a-input
                                        maxlength="200"
                                        show-count
                                        :placeholder="inputHolder"
                                        v-model:value="state.modalForm.userPerformance"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="核心下级情况"
                                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                    name="userCoreEmployee"
                                >
                                    <a-input
                                        maxlength="200"
                                        show-count
                                        :placeholder="inputHolder"
                                        v-model:value="state.modalForm.userCoreEmployee"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="核心上级情况"
                                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                    name="userCoreLeader"
                                >
                                    <a-input
                                        maxlength="200"
                                        show-count
                                        :placeholder="inputHolder"
                                        v-model:value="state.modalForm.userCoreLeader"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="判断核心决策人职业背景对于信息化工业的阻碍、风险或益处"
                                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                    name="userBackgroudImpedeProfit"
                                >
                                    <a-input
                                        maxlength="200"
                                        show-count
                                        :placeholder="inputHolder"
                                        v-model:value="state.modalForm.userBackgroudImpedeProfit"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-divider style="margin: 16px 0; background-color: #3875ff" />
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="年龄"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userAge"
                                    >
                                        <a-input-number
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userAge"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="晋升空间"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userPromotionOpportunity"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userPromotionOpportunity"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="性格理念"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userPersonalityConcept"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userPersonalityConcept"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item
                                        label="判断核心决策人职业理念对于信息化工业的阻碍、风险或益处"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userThoughtImpedeProfit"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userThoughtImpedeProfit"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="对水泥配料项目态度"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userCementIngrediantsAttitude"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userCementIngrediantsAttitude"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="敏感点"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userSensitivePoints"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userSensitivePoints"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item
                                        label="判断核心决策人职业敏感点对于信息化工业的阻碍、风险或益处"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userSensitiveImpedeProfit"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userSensitiveImpedeProfit"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="tip mg16">基本信息-基本信息</div>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="性别"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="basicSex"
                                    >
                                        <a-select
                                            :options="state.sexList"
                                            v-model:value="state.modalForm.basicSex"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="部门"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="basicDepartment"
                                    >
                                        <a-select
                                            :options="state.bmList"
                                            v-model:value="state.modalForm.basicDepartment"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="职级"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="basicPositionLevel"
                                    >
                                        <a-select
                                            :options="state.zjList"
                                            v-model:value="state.modalForm.basicPositionLevel"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item label="籍贯">
                                        <a-tree-select
                                            v-model:value="state.modalForm.basicNativePlace"
                                            allowClear
                                            showSearch
                                            :placeholder="selectHolder"
                                            tree-default-expand-all
                                            :tree-data="state.jgList"
                                            :field-names="{ label: 'title', value: 'title', key: 'value' }"
                                            tree-node-filter-prop="title"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="阴历生日">
                                        <a-date-picker
                                            valueFormat="YYYY-MM-DD"
                                            v-model:value="state.modalForm.basicLunarCalendarBirth"
                                            :placeholder="selectHolder"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="阳历生日">
                                        <a-date-picker
                                            v-model:value="state.modalForm.basicSolarCalendarBirth"
                                            valueFormat="YYYY-MM-DD"
                                            :placeholder="selectHolder"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item label="学历">
                                        <a-select
                                            :options="state.xlList"
                                            v-model:value="state.modalForm.basicEducationalBackground"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="婚姻状况">
                                        <a-select
                                            :options="state.hyList"
                                            v-model:value="state.modalForm.basicMaritalStatus"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg20 flex"
                                    ><div> 子女状况 </div
                                    ><a-button type="link" @click="handleAddSon">
                                        <template #icon><PlusOutlined /></template>
                                        添加</a-button
                                    ></div
                                >
                            </a-col>
                            <div class="son-item" v-for="(item, index) in state.modalForm.childrenList" :key="index">
                                <a-row :gutter="24">
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="性别">
                                            <a-select
                                                v-model:value="state.modalForm.childrenList[index].sex"
                                                :options="state.sexList"
                                                :placeholder="selectHolder"
                                                show-search
                                                :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="年龄">
                                            <a-input-number
                                                min="1"
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.childrenList[index].age"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="学校">
                                            <a-input
                                                maxlength="200"
                                                show-count
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.childrenList[index].school"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="3" class="gray-bgc" style="display: flex; align-items: center">
                                        <MinusCircleOutlined
                                            style="cursor: pointer; color: #3875ff"
                                            @click="handleDeleteSon(index)"
                                        />
                                    </a-col>
                                </a-row>
                                <a-row :gutter="24">
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="专业">
                                            <a-input
                                                maxlength="200"
                                                show-count
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.childrenList[index].professionalName"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="喜好">
                                            <a-input
                                                maxlength="200"
                                                show-count
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.childrenList[index].hobby"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="其他">
                                            <a-input
                                                maxlength="200"
                                                show-count
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.childrenList[index].other"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="3" class="gray-bgc" style="display: flex; align-items: center" />
                                </a-row>
                            </div>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg20 flex"><div> 配偶状况 </div></div>
                            </a-col>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item label="年龄">
                                        <a-input-number
                                            min="1"
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.spouse.age"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="职业">
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.spouse.postion"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="喜好">
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.spouse.hobby"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="其他">
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.spouse.other"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="tip mg16">基本信息-工作信息</div>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="上任时间"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="workStartTime"
                                    >
                                        <a-date-picker
                                            v-model:value="state.modalForm.workStartTime"
                                            value-format="YYYY-MM-DD"
                                            :placeholder="selectHolder"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="任期"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="workPeriod"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.workPeriod"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="职业需求"
                                        :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                        name="workOccupationalNeeds"
                                    >
                                        <a-select
                                            v-model:value="state.modalForm.workOccupationalNeeds"
                                            :options="state.zyxqList"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="tip mg16">基本信息-生活信息</div>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="兴趣爱好"
                                        :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                        name="lifeInterestsHobbies"
                                    >
                                        <a-select
                                            :options="state.xqList"
                                            v-model:value="state.modalForm.lifeInterestsHobbies"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item label="其他兴趣爱好">
                                        <a-textarea v-model:value="state.modalForm.lifeInterestsHobbiesStr" />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg20 flex"><div> 饮食喜好 </div></div>
                            </a-col>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="品类"
                                        :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkCategory"
                                    >
                                        <a-select
                                            :options="state.plList"
                                            v-model:value="state.modalForm.lifeFoodDrinkCategory"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="口味"
                                        :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkTaste"
                                    >
                                        <a-select
                                            :options="state.kwList"
                                            v-model:value="state.modalForm.lifeFoodDrinkTaste"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="食材"
                                        :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkFoodIngredients"
                                    >
                                        <a-select
                                            :options="state.scList"
                                            v-model:value="state.modalForm.lifeFoodDrinkFoodIngredients"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="茶类"
                                        :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkTea"
                                    >
                                        <a-select
                                            :options="state.teaList"
                                            v-model:value="state.modalForm.lifeFoodDrinkTea"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="酒类"
                                        :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkWine"
                                    >
                                        <a-select
                                            :options="state.jList"
                                            v-model:value="state.modalForm.lifeFoodDrinkWine"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="香烟"
                                        :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkSmoke"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.lifeFoodDrinkSmoke"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item
                                        label="过敏源或习惯"
                                        :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                        name="lifeAllergen"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.lifeAllergen"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item
                                        label="生活需求（家庭需求）"
                                        :rules="[{ required: false, message: '请输入', trigger: 'blur' }]"
                                        name="lifeNeeds"
                                    >
                                        <a-input
                                            maxlength="200"
                                            show-count
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.lifeNeeds"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </div>
                    <div class="bottom-btn">
                        <a-button
                            type="primary"
                            style="width: 138px"
                            @click="handleSubmitPeople"
                            :loading="state.submitLoading"
                            >保存</a-button
                        >
                    </div>
                </div>
            </a-drawer>
            <!--            新建/编辑-->

            <div class="body">
                <div class="top-msg">
                    <div class="left-msg">
                        <div class="img-div">
                            <div class="img"> </div>
                        </div>

                        <div class="user-name">{{ state.detailData?.userName }}</div>
                        <div class="user-post">{{ state.detailData?.userPosition }}</div>
                    </div>
                    <a-button type="primary" @click="handleEditPeople(state.detailData)">
                        {{ state.type === 'detail' ? '编辑' : '新建' }}</a-button
                    >
                </div>
                <div class="main">
                    <div class="out-body">
                        <div class="factory-top-title">
                            <div> 关键信息 </div>
                        </div>
                    </div>
                    <div class="content no-top-padding">
                        <div class="custom-desc-body mg16">
                            <!-- 第一行 -->
                            <div class="custom-desc__item custom-desc__left-label">职能与权限</div>
                            <div class="custom-desc__item custom-desc__left-content" rowspan="1">
                                {{ state.detailData?.userFunction }}
                            </div>
                            <div class="custom-desc__item custom-desc__right-label" rowspan="1"
                                >掌握核心决策人及其权限</div
                            >
                            <div class="custom-desc__item custom-desc__right-content" rowspan="1">{{
                                state.detailData?.userCoreDecisionMakers
                            }}</div>

                            <!-- 第二行 -->
                            <!--                            <div class="custom-desc__item custom-desc__left-label">电话号码</div>-->
                            <!--                            <div class="custom-desc__item custom-desc__left-content">-->
                            <!--                                {{ state.detailData?.telephone }}-->
                            <!--                            </div>-->

                            <!--                            &lt;!&ndash; 第三行 &ndash;&gt;-->
                            <!--                            <div class="custom-desc__item custom-desc__left-label">微信号</div>-->
                            <!--                            <div class="custom-desc__item custom-desc__left-content">{{-->
                            <!--                                state.detailData?.wechatNumber-->
                            <!--                            }}</div>-->
                        </div>
                        <div class="custom-desc-body mg16">
                            <!-- 第一行 -->
                            <div class="custom-desc__item custom-desc__left-label">履历</div>
                            <div class="custom-desc__item custom-desc__left-content">
                                <div v-for="(item, index) in state.detailData?.workExperienceList" :key="index">
                                    <div class="timeline-content">
                                        <div class="content-box">
                                            <div class="text-left"
                                                ><span class="deep-font">{{ item.company }}</span> -
                                                <span class="light-font">{{ item.position }}</span></div
                                            >
                                            <div class="text-right gory-font">{{
                                                formatWorkTimeRange(item.workTime)
                                            }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="custom-desc__item custom-desc__right-label" rowspan="5"
                                >判断核心决策人职业背景对于信息化工业的阻碍、风险或益处</div
                            >
                            <div class="custom-desc__item custom-desc__right-content" rowspan="5">{{
                                state.detailData?.userBackgroudImpedeProfit
                            }}</div>

                            <!-- 第二行 -->
                            <div class="custom-desc__item custom-desc__left-label">生产和信息化岗位专业</div>
                            <div class="custom-desc__item custom-desc__left-content">
                                {{ state.detailData?.userInformationProfessional }}
                            </div>

                            <!-- 第三行 -->
                            <div class="custom-desc__item custom-desc__left-label">项目业绩</div>
                            <div class="custom-desc__item custom-desc__left-content">{{
                                state.detailData?.userPerformance
                            }}</div>
                            <div class="custom-desc__item custom-desc__left-label">核心下级情况</div>
                            <div class="custom-desc__item custom-desc__left-content">{{
                                state.detailData?.userCoreEmployee
                            }}</div>
                            <div class="custom-desc__item custom-desc__left-label">核心上级情况</div>
                            <div class="custom-desc__item custom-desc__left-content">{{
                                state.detailData?.userCoreLeader
                            }}</div>
                        </div>
                        <a-divider style="margin-bottom: 16px; margin-top: 0; background-color: #3875ff" />
                        <div class="custom-desc-body mg16">
                            <!-- 第一行 -->
                            <div class="custom-desc__item custom-desc__left-label">年龄</div>
                            <div class="custom-desc__item custom-desc__left-content">
                                {{ state.detailData?.userAge }}
                            </div>
                            <div class="custom-desc__item custom-desc__right-label" rowspan="3"
                                >判断核心决策人职业理念对于信息化工业的阻碍、风险或益处</div
                            >
                            <div class="custom-desc__item custom-desc__right-content" rowspan="3">{{
                                state.detailData?.userThoughtImpedeProfit
                            }}</div>

                            <!-- 第二行 -->
                            <div class="custom-desc__item custom-desc__left-label">晋升空间</div>
                            <div class="custom-desc__item custom-desc__left-content">
                                {{ state.detailData?.userPromotionOpportunity }}
                            </div>

                            <!-- 第三行 -->
                            <div class="custom-desc__item custom-desc__left-label">性格理念</div>
                            <div class="custom-desc__item custom-desc__left-content">{{
                                state.detailData?.userPersonalityConcept
                            }}</div>
                        </div>
                        <a-divider style="margin-bottom: 16px; margin-top: 0; background-color: #3875ff" />
                        <div class="custom-desc-body mg16">
                            <!-- 第一行 -->
                            <div class="custom-desc__item custom-desc__left-label">对水泥配料项目态度</div>
                            <div class="custom-desc__item custom-desc__left-content">
                                {{ state.detailData?.userCementIngrediantsAttitude }}
                            </div>
                            <div class="custom-desc__item custom-desc__right-label" rowspan="3"
                                >判断核心决策人职业敏感点对于信息化工业的阻碍、风险或益处</div
                            >
                            <div class="custom-desc__item custom-desc__right-content" rowspan="3">{{
                                state.detailData?.userSensitiveImpedeProfit
                            }}</div>

                            <!-- 第二行 -->
                            <div class="custom-desc__item custom-desc__left-label">敏感点</div>
                            <div class="custom-desc__item custom-desc__left-content">
                                {{ state.detailData?.userSensitivePoints }}
                            </div>
                        </div>
                    </div>
                    <div class="bottom-content">
                        <a-tabs v-model:activeKey="state.activeKey">
                            <a-tab-pane key="基本信息" tab="基本信息" />
                            <a-tab-pane key="工作信息" tab="工作信息" />
                            <a-tab-pane key="生活信息" tab="生活信息" />
                        </a-tabs>
                        <template v-if="state.activeKey === '基本信息'">
                            <div class="information-table mg16" style="margin-top: 0">
                                <div class="four-line middle-div" style="border-top: none">
                                    <div class="table-title">性别</div>
                                    <div class="table-content-four">{{ state.detailData?.basicSex }}</div>
                                    <div class="table-title middle">部门</div>
                                    <div class="table-content-four">{{ state.detailData?.basicDepartment }}</div>
                                    <div class="table-title middle">职级</div>
                                    <div class="table-content-four">{{ state.detailData?.basicPositionLevel }}</div>
                                    <div class="table-title middle">籍贯</div>
                                    <div class="table-content-four">{{ state.detailData?.basicNativePlace }}</div>
                                </div>
                                <div class="four-line middle-div">
                                    <div class="table-title">阴历生日</div>
                                    <div class="table-content-four">{{
                                        state.detailData?.basicLunarCalendarBirth
                                    }}</div>
                                    <div class="table-title middle">阳历生日</div>
                                    <div class="table-content-four">{{
                                        state.detailData?.basicSolarCalendarBirth
                                    }}</div>
                                    <div class="table-title middle">学历</div>
                                    <div class="table-content-four">{{
                                        state.detailData?.basicEducationalBackground
                                    }}</div>
                                    <div class="table-title middle">婚姻状况</div>
                                    <div class="table-content-four">{{ state.detailData?.basicMaritalStatus }}</div>
                                </div>
                            </div>
                            <div class="bottom-tip deep-font mg16">子女状况</div>
                            <div class="base-table mg16">
                                <a-table
                                    bordered
                                    :columns="sonColumns"
                                    :data-source="state.detailData?.childrenList"
                                    :pagination="false"
                                />
                            </div>
                            <div class="bottom-tip deep-font mg16">配偶状况</div>
                            <div class="base-table mg16">
                                <a-table
                                    bordered
                                    :columns="spouseColumns"
                                    :data-source="[state.detailData?.spouse]"
                                    :pagination="false"
                                />
                            </div>
                        </template>
                        <template v-if="state.activeKey === '工作信息'">
                            <div
                                class="information-table mg16"
                                style="border-top: none; border-bottom: none; margin: 0"
                            >
                                <div class="four-line">
                                    <div class="table-title">上任时间</div>
                                    <div class="table-content-four">{{ state.detailData?.workStartTime }}</div>
                                    <div class="table-title middle">任期</div>
                                    <div class="table-content-four">{{ state.detailData?.workPeriod }}</div>
                                    <div class="table-title middle">职业需求</div>
                                    <div class="table-content-four">{{ state.detailData?.workOccupationalNeeds }}</div>
                                </div>
                            </div>
                        </template>
                        <template v-if="state.activeKey === '生活信息'">
                            <div class="deep-font mg4">兴趣爱好：</div>
                            <div class="light-font mg16">{{ state.detailData?.lifeInterestsHobbies }}</div>
                            <div class="deep-font mg4">其他兴趣爱好：</div>
                            <div class="light-font mg16">{{ state.detailData?.lifeInterestsHobbiesStr }}</div>
                            <div class="bottom-tip deep-font mg16">饮食喜好</div>
                            <div class="information-table mg16">
                                <div class="four-line middle-div" style="border-top: none">
                                    <div class="table-title">品类</div>
                                    <div class="table-content-four">{{ state.detailData?.lifeFoodDrinkCategory }}</div>
                                    <div class="table-title middle">口味</div>
                                    <div class="table-content-four">{{ state.detailData?.lifeFoodDrinkTaste }}</div>
                                    <div class="table-title middle">食材</div>
                                    <div class="table-content-four">{{
                                        state.detailData?.lifeFoodDrinkFoodIngredients
                                    }}</div>
                                    <div class="table-title middle">茶类</div>
                                    <div class="table-content-four">{{ state.detailData?.lifeFoodDrinkTea }}</div>
                                </div>
                                <div class="four-line middle-div">
                                    <div class="table-title">酒类</div>
                                    <div class="table-content-four">{{ state.detailData?.lifeFoodDrinkWine }}</div>
                                    <div class="table-title middle">香烟</div>
                                    <div class="table-content-four">{{ state.detailData?.lifeFoodDrinkSmoke }}</div>
                                    <div class="table-title middle"></div>
                                    <div class="table-content-four"></div>
                                    <div class="table-title middle"></div>
                                    <div class="table-content-four"></div>
                                </div>
                            </div>
                            <div class="deep-font mg4">过敏原或习惯：</div>
                            <div class="light-font mg16">{{ state.detailData?.lifeAllergen }}</div>
                            <div class="deep-font mg4">生活需求（家庭需求）：</div>
                            <div class="light-font mg16">{{ state.detailData?.lifeNeeds }}</div>
                        </template>
                    </div>
                </div>
            </div>
            <!-- end vid_he7kuq24pr 自定义模板_hpt2v3xarp -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑======================================== onMounted(() => {

    onMounted(() => {
        const urlParams = new URLSearchParams(window.location.search)
        const id = urlParams.get('id')?.trim() // 加上 trim 保险点

        state.detailId = id
        state.areaId = urlParams.get('areaId')
        state.type = urlParams.get('type')
        state.source = urlParams.get('source')
        state.urlMiddle = urlMiddleMap[state.source]

        if (id) {
            getData()
            console.log('查看')
        } else {
            state.addOrEditVisible = true
            state.addOrEditTitle = '新建'
        }

        loadAllDictionaries()
    })


    const sonColumns = ref([
        {
            title: '性别',
            align: 'center',
            dataIndex: 'sex',
            ellipsis: true
        },
        {
            title: '年龄',
            align: 'center',
            dataIndex: 'age',
            ellipsis: true
        },
        {
            title: '学校',
            align: 'center',
            dataIndex: 'school',
            ellipsis: true
        },
        {
            title: '专业',
            align: 'center',
            dataIndex: 'professionalName',
            ellipsis: true
        },
        {
            title: '喜好',
            align: 'center',
            dataIndex: 'hobby',
            ellipsis: true
        },
        {
            title: '其他',
            align: 'center',
            dataIndex: 'other',
            ellipsis: true
        }
    ])
    const spouseColumns = ref([
        {
            title: '年龄',
            align: 'center',
            dataIndex: 'age',
            ellipsis: true
        },
        {
            title: '职业',
            align: 'center',
            dataIndex: 'postion',
            ellipsis: true
        },

        {
            title: '喜好',
            align: 'center',
            dataIndex: 'hobby',
            ellipsis: true
        },
        {
            title: '其他',
            align: 'center',
            dataIndex: 'other',
            ellipsis: true
        }
    ])
    const state = reactive({
        detailId: undefined,
        areaId: undefined,
        source: undefined,
        type: undefined,
        urlMiddle: undefined,
        submitLoading: false,
        detailData: {},
        activeKey: '基本信息',
        addOrEditVisible: false,
        addOrEditTitle: '',
        modalForm: {
            userName: undefined,
            telephone: undefined,
            wechatNumber: undefined,
            userPosition: undefined,
            userFunction: undefined,
            workExperienceList: [
                {
                    workTimeList: undefined,
                    company: undefined,
                    position: undefined
                }
            ],
            userInformationProfession: undefined,
            userPerformance: undefined,
            userCoreLeader: undefined,
            userCoreEmployee: undefined,
            userBackgroudImpedeProfit: undefined,
            userThoughtImpedeProfit: undefined,
            userSensitiveImpedeProfit: undefined,
            basicSex: undefined,
            basicDepartment: undefined,
            basicPositionLevel: undefined,
            basicNativePlace: undefined,
            basicSolarCalendarBirth: undefined,
            basicLunarCalendarBirth: undefined,
            basicEducationalBackground: undefined,
            basicMaritalStatus: undefined,
            workStartTime: undefined,
            workPeriod: undefined,
            workOccupationalNeeds: undefined,
            lifeInterestsHobbies: undefined,
          lifeInterestsHobbiesStr: undefined,
            lifeFoodDrinkCategory: undefined,
            lifeFoodDrinkTaste: undefined,
            lifeFoodDrinkFoodIngredients: undefined,
            lifeFoodDrinkTea: undefined,
            lifeFoodDrinkWine: undefined,
            lifeFoodDrinkSmoke: undefined,
            lifeAllergen: undefined,
            lifeNeeds: undefined,
            userAge: undefined,
            userPersonalityConcept: undefined,
            userPromotionOpportunity: undefined,
            userCementIngrediantsAttitude: undefined,
            userSensitivePoints: undefined,
            childrenList: [
                {
                    sex: undefined,
                    age: undefined,
                    professionalName: undefined,
                    school: undefined,
                    hobby: undefined,
                    other: undefined
                }
            ],
            spouse: {}
        },
        //     部门
        bmList: [],
        //     职位
        zwList: [],
        //     性别
        sexList: [],
        //     职级
        zjList: [],
        //     籍贯
        jgList: [],
        //     学历
        xlList: [],
        //     婚姻
        hyList: [],
        //     兴趣
        xqList: [],
        //     品类
        plList: [],
        //     口味
        kwList: [],
        //     食材
        scList: [],
        //     茶类
        teaList: [],
        //     酒
        jList: [],
        // 职业需求
        zyxqList: []
    })
    import rawData from '@province-city-china/data'
    function getProvinceCityTree(data) {
        const provinces = data.filter(item => item.city === 0 || item.city === '00')
        const cities = data.filter(item => item.city !== 0 && item.city !== '00' && item.area === 0 && item.town === 0)

        const provinceMap = new Map()

        provinces.forEach(prov => {
            provinceMap.set(prov.province, {
                title: prov.name,
                value: prov.code,
                children: []
            })
        })

        cities.forEach(city => {
            const parent = provinceMap.get(city.province)
            if (parent) {
                parent.children.push({
                    title: city.name,
                    value: city.code
                })
            }
        })

        // 返回结构数组
        return Array.from(provinceMap.values())
    }

    state.jgList = getProvinceCityTree(rawData)
    const urlMiddleMap = {
        'area': 'customer_area_user_portrait',
        'factory': 'customer_area_factory_user_portrait'
    }
    const dictMap = {
        bmList: 'CUSTOMER.AREA.DEPARTMENT',
        zwList: 'CUSTOMER.AREA.POSITION',
        sexList: 'CUSTOMER.AREA.SEX',
        zjList: 'CUSTOMER.AREA.POSITION-LEVEL',
        xlList: 'CUSTOMER.AREA.RESUME',
        hyList: 'CUSTOMER.AREA.MARRIAGE',
        xqList: 'CUSTOMER.AREA.HOBBY',
        plList: 'CUSTOMER.AREA.EAT.CATEGORY',
        kwList: 'CUSTOMER.AREA.EAT.TASTE',
        scList: 'CUSTOMER.AREA.EAT.FOOD',
        teaList: 'CUSTOMER.AREA.EAT.TEA',
        jList: 'CUSTOMER.AREA.EAT.WINE',
        zyxqList: 'CUSTOMER.AREA.OCCUPATIONAL.NEEDS'
    }
    function loadAllDictionaries() {
        Object.entries(dictMap).forEach(([key, apiKey]) => {
            fetchDictionary(apiKey, key as keyof typeof state)
        })
    }
    function fetchDictionary(apiKey, target: keyof typeof state) {
        get(`/solution-ppm-basic-data/api/v1/dictionary/search/${apiKey}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state[target] = data.data.map(item => ({
                label: item.itemName,
                value: item.itemName
            }))
        })
    }

    const llItem = {
        workTimeList: undefined,
        company: undefined,
        position: undefined
    }
    const sonItem = {
        sex: undefined,
        age: undefined,
        professionalName: undefined,
        school: undefined,
        hobby: undefined,
        other: undefined
    }
    const inputHolder = '请输入'
    const selectHolder = '请选择'
    const formRef = ref(null)
    function getData() {
        get(`/solution-crm/api/v1/built-in-system-ppm/${state.urlMiddle}/${state.detailId}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.detailData = data.data
        })
    }
    function cancelDrawer() {
        state.addOrEditVisible = false
    }
    function handleAddJob() {
        state.modalForm.workExperienceList.push({ ...llItem })
    }
    function handleDeleteJob(index) {
        state.modalForm.workExperienceList.splice(index, 1)
    }
    function handleAddSon() {
        state.modalForm.childrenList.push({ ...sonItem })
    }
    function handleDeleteSon(index) {
        state.modalForm.childrenList.splice(index, 1)
    }
    function handleEditPeople(record) {
        const data = cloneDeep(record)
        Object.assign(state.modalForm, data)
        state.addOrEditVisible = true
    }
    //     保存
    function handleSubmitPeople() {
        formRef.value.validate().then(() => {
            state.submitLoading = true
            const api = state.type === 'detail' ? put : post
            // const url = state.detailId
            //     ? `/solution-crm/api/v1/built-in-system-ppm/${state.urlMiddle}/${state.detailId ? state.detailId : ''}`
            //     : `/solution-crm/api/v1/built-in-system-ppm/${state.urlMiddle}`
            api(
                `/solution-crm/api/v1/built-in-system-ppm/${state.urlMiddle}${
                    state.detailId ? `/${state.detailId}` : ''
                }`,
                {
                    ...state.modalForm,
                    areaId: state.source === 'area' ? state.areaId : '',
                    factoryId: state.source === 'factory' ? state.areaId : ''
                }
            )
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    if (state.type === 'add') {
                        Object.assign(state.detailData, data.data)
                        state.detailId = data.data.id
                        state.type = 'detail'
                        window.history.replaceState(
                            {},
                            '',
                            `?id=${state.detailId}&areaId=${state.areaId}&source=${state.source}&type=detail`
                        )
                    } else {
                        getData()
                    }

                    state.addOrEditVisible = false
                })
                .finally(() => {
                    state.submitLoading = false
                })
        })
    }
    function formatWorkTimeRange(list) {
        console.log(list)
        if (Array.isArray(list) && list.length === 2) {
            return `${list[0].replace('-', '.')} - ${list[1].replace('-', '.')}`
        }
        return ''
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-workExperienceList) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .body {
        height: 100%;
    }
    .top-msg {
        height: 72px;
        padding: 16px 24px;
        border-radius: 4px;
        background-color: #fff;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
    }
    .left-msg {
        display: flex;
        gap: 16px;
        align-items: center;
    }
    .user-name {
        font-size: 24px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }
    .user-post {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }
    .img-div {
        width: 40px;
        height: 40px;
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background: #ebf1ff;
    }
    .img {
        width: 20px;
        height: 20px;
        background-image: url('http://10.40.0.33:9001/file-storage/510422284987533312-source.png');
        background-size: cover;
    }
    .main {
        overflow-y: auto;
        height: calc(100% - 100px);
        background-color: #fff;
    }
    .content {
        padding: 24px;
        background-color: #fff;
        border-radius: 4px;
        margin-bottom: 16px;
    }
    .tip {
        height: 16px;
        line-height: 16px;
        padding-left: 8px;
        border-left: 4px solid #3875ff;
        font-size: 16px;
        color: #000000;
        letter-spacing: 0;
        font-weight: 600;
    }
    .mg16 {
        margin-bottom: 16px;
    }
    .mg4 {
        margin-bottom: 4px;
    }
    .light-font {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }
    .deep-font {
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }

    .timeline-content {
        flex: 1;
        border-radius: 4px;
        padding: 12px 16px;
        width: 100%;
    }

    .content-box {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #333;
    }
    .left-dot {
        width: 12px;
        height: 12px;
        border: 1px solid #3875ff;
        border-radius: 50%;
        position: relative;
    }
    :deep(.ant3-timeline-item-tail) {
        border: 1px dashed #3875ff;
    }
    .gory-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }
    .mg8 {
        margin-bottom: 8px;
    }
    :deep(.ant3-timeline-item-last) {
        padding-bottom: 5px !important;
    }
    .bottom-content {
        padding: 0 24px 18px 24px;
        background: #ffffff;
        border-radius: 4px;
    }
    .information-table {
        margin-top: 23px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
    }
    .table-title {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
        width: 122px;
        text-align: right;
        line-height: 24px;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9;
        flex-shrink: 0; /* 不允许压缩 */
        background: #f5f8ff;
        border-radius: 4px 0 0 0;
    }
    .table-content {
        padding: 10px 17px;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .table-content-one,
    .table-content-four {
        padding: 10px 17px;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        line-height: 20px;
    }
    .one-line,
    .four-line {
        height: 40px;
        display: flex;
        line-height: 40px;
    }
    .four-line {
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
    }
    .table-content-four {
        flex: 1;
        text-overflow: ellipsis; /* 如果内容过长显示省略号 */
        overflow: hidden;
        white-space: nowrap;
    }
    .middle {
        border-left: 1px solid #d9d9d9;
    }
    .middle-div {
        border-bottom: none;
    }
    .bottom-tip {
        height: 14px;
        line-height: 14px;
        border-left: 2px solid #3875ff;
        padding-left: 6px;
        display: flex;
        gap: 40px;
    }
    .base-table:deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #f5f8ff;
        color: #262626;
        font-weight: 600;
        padding: 10px 16px;
        border-right: 1px solid #d9d9d9 !important;
        position: relative;
    }
    .base-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;
    }
    .mg20 {
        margin-bottom: 20px;
    }
    .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .gray-bgc {
        background-color: #fafafa;
        padding-top: 16px;
        border-radius: 4px;
    }
    .drawer-body:deep(.ant3-picker) {
        width: 100%;
    }
    .drawer-body {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .drawer-main {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .bottom-btn {
        height: 72px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #f0f0f0; /* 可选的分隔线 */
        background-color: #fff; /* 确保按钮不被内容遮挡 */
        z-index: 10; /* 若上面有浮层可适当加 */
    }
    .drawer-body :deep(.ant3-input-number) {
        width: 100%;
    }
    .out-body {
        background-color: #fff;
    }
    .factory-top-title {
        height: 64px;
        border-left: 4px solid #3875ff;
        background: #ffffff;
        border-radius: 4px 0 0 0;
        display: flex;
        justify-content: space-between;
        padding: 24px;
        border-bottom: 1px solid #d9d9d9;
        align-items: center;
        margin-bottom: 16px;
    }
    .no-top-padding {
        padding-top: 0;
        padding-bottom: 0;
    }
    :deep(.ant3-descriptions-item-label) {
        width: 170px;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        background: #f5f8ff;
    }
    :deep(.ant3-descriptions-view) {
        border-radius: 4px;
    }
    :deep(.ant3-descriptions-view) {
        table {
            table-layout: fixed !important; /* 固定表格布局 */
            width: 100% !important;
            color: red;
        }
    }
    .custom-desc-body {
        display: grid;
        grid-template-columns: 170px 1fr 170px 1fr;
        border: 1px solid #f0f0f0;
        border-radius: 4px;
    }

    .custom-desc__item {
        padding: 12px;
        border-bottom: 1px solid #f0f0f0;
        border-right: 1px solid #f0f0f0;
        min-height: 50px; /* 保证最小高度 */
        box-sizing: border-box;
    }

    /* 左侧标签样式 */
    .custom-desc__left-label {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        background: #f5f8ff;
        word-break: break-word; /* 超出宽度自动换行 */
        display: flex;
        align-items: center;
    }

    /* 右侧标签样式 */
    .custom-desc__right-label {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        background: #f5f8ff;
        word-break: break-word;
    }

    /* 右侧合并单元格跨3行 */
    .custom-desc__item[rowspan='3'] {
        grid-row: span 3;
        display: flex;
        align-items: center;
        justify-content: start; /* 内容水平居中（可选） */
    }
    /* 右侧合并单元格跨3行 */
    .custom-desc__item[rowspan='5'] {
        grid-row: span 5;
        display: flex;
        align-items: center;
        justify-content: start; /* 内容水平居中（可选） */
    }
    /* 右侧合并单元格跨3行 */
    .custom-desc__item[rowspan='1'] {
        grid-row: span 1;
        display: flex;
        align-items: center;
        justify-content: start; /* 内容水平居中（可选） */
    }

    /* 左侧内容区域自适应 */
    .custom-desc__left-content,
    .custom-desc__right-content {
        word-break: break-word; /* 内容超出时换行 */
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
        white-space: break-spaces;
    }
</style>
